<template>
	<view>
		<!-- 表格 -->
		<view style="margin: 0 20upx">
			<view class="conteng">
				<block
					v-for="(item, index) in tables"
					:key="index">
					<view>
						<text class="tick">{{ item.tick }}</text>
						<text class="nametext">{{ item.nametext }}</text>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'classify',
		data() {
			return {
				tables: [
					{
						tick: '智',
						nametext: '智能'
					},
					{
						tick: '投',
						nametext: '迅捷'
					},
					{
						tick: '简',
						nametext: '高效'
					},
					{
						tick: '历',
						nametext: '精准'
					}
				]
			}
		}
	}
</script>

<style scoped>
	.conteng {
		display: flex;
		flex-wrap: warp;
		width: 100%;
		-webkit-flex-wrap: wrap;
		overflow: hidden;
		border: 1rpx solid #eeeeee;
		border-radius: 10rpx;
	}

	.conteng view {
		width: 25%;
		flex-direction: column;
		align-items: center;
		display: flex;
		box-sizing: border-box;
		padding: 20upx 0;
	}
	.conteng view:nth-child(2) {
		border-left: 1rpx solid #eeeeee;
		border-right: 1rpx solid #eeeeee;
	}
	.conteng view:nth-child(6) {
		border-left: 1rpx solid #eeeeee;
		bordeer-right: 1rpx solid #eeeeee;
	}
	.conteng view:nth-child(3) {
		border-right: 1rpx solid #eeeeee;
	}
	.conteng view:nth-child(7) {
		border-right: 1rpx solid #eeeeee;
	}
	.conteng view:nth-child(-n + 4) {
		border-bottom: 1rpx solid #eeeeee;
	}
	.tick {
		font-size: 30upx;
		color: #3333333;
		font-weight: bold;
	}
	.nametext {
		font-size: 23upx;
		color: #686868;
	}
</style>
